/* 学习目标：useEffect-卸载时  */

/**
语法：
useEffect(() => {

    return () => {
        回调函数，只会在卸载时会自动执行
    }
  }, [])
  
*/

import React, { useEffect, useState } from 'react';

export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child />}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  // 在子组件中挂载时监听窗口改变事件
  const fn = () => {
    console.log('窗口改变了  ----->  ');
  };

  useEffect(() => {
    // 1. 挂载后，开启窗口改变事件
    window.addEventListener('resize', fn);

    // 2. 返回的回调函数， 会在卸载自动执行
    return () => {
      window.removeEventListener('resize', fn);
    };
  }, []);
  return <div>我是子组件</div>;
}
